<template>
  <div class="selectWrap" :class="{ selectWrap2: true }">
    <!-- 期刊年份选择 -->
    <div ref="mySwiper" v-swiper:mySwiper="swiperOption" class="swiper-container" style="width: 1040px;">
      <div ref="swiperWrapper" class="swiper-wrapper">
        <div v-for="(item, index) in weekData" :key="index" :auto-update="true" class="select black swiper-slide" :class="{ hasSend: item.status === 2, noSend: item.status === 1 }">
          {{ item.years_week }}
        </div>
      </div>
      <div class="swiper-button-prev swiper-btn">
        <img src="@/assets/img/logisticsimg/left.png" class="leftIcon" />
      </div>
      <div class="swiper-button-next swiper-btn ">
        <img src="@/assets/img/logisticsimg/right.png" class="rightIcon" />
      </div>
    </div>
  </div>
</template>

<script>
import { directive } from 'vue-awesome-swiper'
export default {
  name: 'TimeSwiper',
  directives: {
    swiper: directive
  },
  props: {
    weekData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 5,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        loop: true,
        loopAdditionalSlides: 3,
        slideToClickedSlide: true, // 设置为true则点击slide会过渡到这个slide。
        centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。
        centeredSlidesBounds: true,
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swipe
        on: {
          slideChange: this.swiperChange
        }
      }
      //   weekData: [
      //     { years: 2020, book_week: 11, status: 3, statusName: '已发货', book_week_name: '11月期刊', years_week: '2020年11月期刊', shipData: [{ id: 100010, type: 3, addtime: '2020-11-20 10:28:02', shiptime: 1605839282, service_json: [{ id: 20, name: '基础造价期刊（套）', number: 1, remark: '《除税信息价》、《市场综合供应价》、《品牌厂商报价》、《地区材料》' }], oa_json: '{"type":3,"get_address":0,"realname":"asad","province_id":53,"city_id":530100000000,"area_id":530102000000,"address":"asdfsad","mobile":"18314150020","tel":null,"post_code":"sadf"}', express_code: null, express_number: null, express_name: '物流快递' }] },
      //     { years: 2020, book_week: 12, status: 1, statusName: '未发货', book_week_name: '12月期刊', years_week: '2020年12月期刊', shipData: [] },
      //     { years: 2021, book_week: 1, status: 1, statusName: '未发货', book_week_name: '1至2月合刊', years_week: '2021年1至2月合刊', shipData: [] },
      //     { years: 2021, book_week: 3, status: 1, statusName: '未发货', book_week_name: '3月期刊', years_week: '2021年3月期刊', shipData: [] },
      //     { years: 2021, book_week: 4, status: 1, statusName: '未发货', book_week_name: '4月期刊', years_week: '2021年4月期刊', shipData: [] },
      //     { years: 2021, book_week: 5, status: 1, statusName: '未发货', book_week_name: '5月期刊', years_week: '2021年5月期刊', shipData: [] },
      //     { years: 2021, book_week: 6, status: 1, statusName: '未发货', book_week_name: '6月期刊', years_week: '2021年6月期刊', shipData: [] },
      //     { years: 2021, book_week: 7, status: 1, statusName: '未发货', book_week_name: '7月期刊', years_week: '2021年7月期刊', shipData: [] },
      //     { years: 2021, book_week: 8, status: 1, statusName: '未发货', book_week_name: '8月期刊', years_week: '2021年8月期刊', shipData: [] },
      //     { years: 2021, book_week: 9, status: 1, statusName: '未发货', book_week_name: '9月期刊', years_week: '2021年9月期刊', shipData: [] },
      //     { years: 2021, book_week: 10, status: 1, statusName: '未发货', book_week_name: '10月期刊', years_week: '2021年10月期刊', shipData: [] }
      //   ]
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  methods: {
    swiperChange() {
      this.$nextTick(() => {
        const showIndex = this.$refs.swiperWrapper.querySelector('.swiper-slide-active').getAttribute('data-swiper-slide-index')
        const showWeek = this.weekData.find((item, index) => {
          return Number(index) === Number(showIndex)
        })
        this.$emit('showNowWeek', showWeek)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.selectWrap1 {
  /deep/ .swiper-slide-active {
    border-top: 3px blue solid !important;
  }
}
.selectWrap2 {
  /deep/ .swiper-slide-active {
    border-top: 3px rgba(255, 119, 45, 1) solid !important;
  }
}
.selectWrap {
  height: 48px;
  width: 100%;
  display: flex;
  position: relative;
  .select {
    width: calc(100% / 5);
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .black {
    background: rgba(250, 250, 250, 1);
    border-top: 3px rgba(0, 0, 0) solid;
  }
  .hasSend {
    color: #333333 !important;
  }
  .noSend {
    color: #666666 !important;
  }
  /deep/ .swiper-button-prev,
  /deep/ .swiper-button-next {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 26px;
    font-weight: bold;
    cursor: pointer;
    &::after {
      content: '';
    }
  }
  /deep/ .swiper-slide-active {
    background: rgba(255, 255, 255, 1);
    color: #333;
  }
  .active-or {
    background: rgba(255, 255, 255, 1);
    border-top: 3px rgba(255, 119, 45, 1) solid;
    color: #333;
  }
  .leftIcon {
    width: 17px;
    height: 22px;
    position: absolute;
    top: 13px;
    left: 0;
    cursor: pointer;
  }
  .rightIcon {
    width: 17px;
    height: 22px;
    position: absolute;
    top: 13px;
    right: 0;
    cursor: pointer;
  }
}
</style>
